<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/4fangdajing.css" />
		<link rel="stylesheet" type="text/css" href="font_2194706_mu5lgewh94/iconfont.css" />
		<style>
			a{
				text-decoration: none;
				color: white;
			}
		</style>
	</head>
	<body>
		<!-- 头部 -->
		<header>
			<div id="header-con">
				<img src="imgs/logo@2x.png">
				<ul>
					<li class="nav"><a href="1shouye.html">首页</a></li>
					<li class="nav">护肤</li>
					<li class="nav">彩妆</li>
					<li class="nav wash">香水
						<div id="wash-con">
							<ul>
								<li>
									<h3>女士香水</h3>
								</li>
								<li class="wash-line">美丽人生系列</li>
								<li class="wash-line">奇迹系列</li>
								<li class="wash-line">真爱系列</li>
								<li class="wash-line">殿堂系列</li>
							</ul>
							<dl>
								<dt><img src="imgs/wash.jpg"></dt>
								<dd>
									<h3>美丽人生香水</h3>
								</dd>
								<dd>快乐因你而生&gt;</dd>
							</dl>
						</div>
					</li>
					<li class="nav">双11狂欢<span></span>
						<b>hot</b></li>
					<li class="nav">双11必囤套装<span></span>
						<b>hot</b></li>
					<li class="nav">双11攻略<span></span><b>hot</b></li>
					<li class="nav">青春奢宠<span></span><b>hot</b></li>
					<li class="nav">会员中心</li>
				</ul>
				<div id="last">
					<span class="iconfont icon-sousuo"></span>
					<span class="iconfont icon-gouwudai"></span>
					<span class="iconfont icon-lianxiren">

					</span>

				</div>
			</div>
		</header>



		<!-- 最上面 -->
		<div id="one">


			<div id="top">
				<img src="imgs/logo@2x.png" class="first">
				<div id="top-bottom">
					<ul>
						<li><a href="1shouye.html">首页</a></li>
						<li>护肤</li>
						<li>彩妆</li>
						<li class="wash">香水
							<div id="wash-con">
								<ul>
									<li class="wash-line">
										<h3>女士香水</h3>
									</li>
									<li class="wash-line">美丽人生系列</li>
									<li class="wash-line">奇迹系列</li>
									<li class="wash-line">真爱系列</li>
									<li class="wash-line">殿堂系列</li>
								</ul>
								<dl>
									<dt><img src="imgs/wash.jpg"></dt>
									<h3>美丽人生香水</h3>
									<dd>快乐因你而生&gt;</dd>
								</dl>
							</div>
						</li>
						<li>双11狂欢<span>hot</span></li>
						<li>双11必囤套装<span>hot</span></li>
						<li>双11攻略<span>hot</span></li>
						<li>青春奢宠<span>hot</span></li>
						<li>会员中心</li>
					</ul>
					<div id="last">
						<span class="iconfont icon-sousuo"></span>
						<span class="iconfont icon-gouwudai"></span>
						<span class="iconfont icon-lianxiren"></span>
					</div>
				</div>
			</div>
		</div>





		<!-- ================================================================================= -->
		<!-- 整个大板块 -->
		<div id="loupe">
			<!-- 左边 -->
			<div class="loupe-left">
				<div class="smallbox">
					<div class="mask">

					</div>
				</div>
				<div class="bigbox">

				</div>

				<!-- 左边的下面 -->
				<div class="bombox">

					<div class="blockall block1">
						<img class="picture p-img">
					</div>
					<div class="blockall block2">
						<img class="picture1 p-img">
					</div>
					<div class="blockall block3">
						<img class="picture2 p-img">
					</div>
				</div>
			</div>





			<!-- 右边 -->
			<div class="loupe-right">
				<p class="ename"></p>
				<h1 class="cname"></h1>
				<div id="money">
					<span class="cost">￥</span>
					<p class="price"></p>
				</div>

				<select name="" class="counts">
					<option value="" class="option"></option>
				</select>

				<div id="purchase">
					<p>购买数量(每人限购5件)</p>
					<div id="add">
						<button type="button" class="decrease">-</button>
						<span class="num">1</span>
						<button type="button" class="increase">+</button>
					</div>
				</div>
				<div id="jifen">
					<p>购买可得积分</p>
					<p>潜客会员至少可得490积分(以结算页面实付金额为准)</p>
				</div>
				<div id="btn">
					<button type="button" class="btnadd">加入购物袋</button>
					<button type="button" class="btnpur">立即购买</button>
				</div>
			</div>

		</div>
		
		
		<!-- ====================================产品详情 -->
		<div id="info">
			<div id="infocon">
				<a href="#production">产品详情</a>
				<a href="#buygift">购物礼遇</a>
			</div>
		</div>
		<!-- 产品详情 -->
		<div id="production">
			<div id="procon">
				<h2 class="fontsize">产品详情</h2>
				<img class="pic1" src="" >
				<img class="pic2" src="" >
			</div>
			
		</div>
		<!-- 购物礼遇 -->
		<div id="buygift">
			<div id="buycon">
				<h2 class="fontsize">购物礼遇</h2>
				<p>(ಥ﹏ಥ)</p>
				<p><br/>这里走丢啦，什么都没有的撒</p>
			</div>
		</div>





	</body>
</html>
<script src="js/jQuery.js"></script>
<script src="js/3listgundongtiao.js"></script>
<script src="js/4fangdajing.js"></script>
<script src="js/4fangJQuery.js"></script>
<script>
	//------------------------------------------- 滚动条
	scroll();


	// 方法1-----------jQuery实现加减数字------------------------
	// $(".increase").click(function() {
	// 	$(".num").html(Number($(".num").html()) + Number(1));
	// })


	// 方法2:-------------jQuery实现加减数字---------
	// html(无参是获取,有参是赋值)
	let ss1 = sessionStorage;
	let count;
	// 先让span里面的数值赋给count;
	count = $(".num").html();
	// 把刚开始数量为1时的值也保存下来
	ss1.setItem("num",count);
	
	$(".increase").click(function() {
		
		
		// 给变量+1
		++count;
		// 加过后的变量值再赋给span里面的html
		$(".num").html(count);
		
		// 获取加减之后的数字,存储到sessionStorage中
		let number = $(".num").html();
		// console.log(number);
	
		ss1.setItem("num", number);
		// console.log(ss.num)
	})

	$(".decrease").click(function() {
		if ($(".num").html() == 1) {
			$(".num").html(1);
		} else {
			// count = $(".num").html();
			--count;
			$(".num").html(count);
		}
		    // 第二种
			// if($(".num").html() > 1){
			// 	count--;
			// 	$(".num").html(count);
			// }else {
			// 	$(".num").html(1);
			// }

		
		
		let number = $(".num").html();
		// console.log(number);
		
		ss1.setItem("num", number);
		// console.log(ss.num)
	})

	
	
	


	// let count;

	// $(".increase").click(function(){
	// 	count = $(".num").html(); //获取到span里面的数值赋给count
	// 	count++;   //对数值进行++
	// 	$(".num").html(count)  //然后再将数值赋给span的html()

	// })

	// $(".decrease").click(function(){
	// 	if($(".num").html()==1){
	// 		$(".num").html(1)
	// 	}else if($(".num").html()>1){
	// 		count--;
	// 		$(".num").html(count);
	// 	}
	// })

	// ------------------------------------------------放大镜
	let oSB = document.querySelector(".smallbox");
	let oMs = document.querySelector(".mask");
	let oBB = document.querySelector(".bigbox");
	let oloupe = document.querySelector("#loupe");

	let MG = new Magnifier(oSB, oMs, oBB, oloupe);
	MG.mouseover();
	MG.mouseout();
	MG.mousemove();



	// -----------------------------------------------加入购物车
	$(".btnadd").click(function(){
		location.href="5buy.html";
	})
	$(".btnpur").click(function(){
		location.href="5buy.html";
	})
</script>
